<template>
  <view>
    <m-top :autoBack="false" :bgChangeByScroll="true" bgColor="#8C82FF" @getHeight="getGlHeight">
      <view class="c333 font32 fw500">{{ globalData.tsAppletName }}</view>
    </m-top>

    <m-container :top="glTop">
      <view class="mgt32 pdv40">
        <u-swiper :list="list" height="300rpx"></u-swiper>

        <view class="mgt20 flex align-center">
          <u-notice-bar
            bgColor="transparent"
            color="#FF661F"
            fontSize="28rpx"
            text="最新公告：亚信安全C3会议即将召开，敬请关注！"
          ></u-notice-bar>
        </view>
        <!-- 1 -->
        <view class="mgt20" v-if="Object.keys(mettingIndex).length > 0">
          <panel-title>大会议程</panel-title>
          <view class="mgt20">
            <panel-agenda :option="mettingIndex"></panel-agenda>
          </view>
        </view>
      </view>

      <!-- 2 -->
      <view class="mgt40 guest-box">
        <view class="pdv40">
          <panel-title :showMore="true" @click="$u.route('/pages-details/agenda/index')">重磅嘉宾</panel-title>
          <view class="mgt20" v-if="guestList[activeIndex]">
            <m-guest :option="guestList[activeIndex]"></m-guest>
          </view>
        </view>

        <view class="mgt20 guest-box__swiper">
          <scroll-view :scroll-x="true">
            <view class="guest-box-main flex align-center">
              <image
                v-for="(item, i) in guestList"
                :class="{
                  active: activeIndex === i,
                }"
                :key="i"
                mode="aspectFill"
                @click="activeIndex = i"
                :src="getImgUrl(item.ti_icon)"
              >
              </image>
            </view>
          </scroll-view>
        </view>
      </view>

      <!-- 3 -->
      <view class="mgt40 pdv40">
        <panel-title>合作伙伴</panel-title>
        <view class="mgt20">
          <panel-cooperation></panel-cooperation>
        </view>
      </view>

      <!-- 4 -->
      <view class="mgt40">
        <view class="pdv40">
          <panel-title :showMore="true" @click="$u.route('/pages-details/news/index')">最新资讯</panel-title>
        </view>
        <view class="mgt20">
          <panel-news :options="newsList"></panel-news>
        </view>
      </view>
    </m-container>

    <view
      class="fixed flex column align-center justify-center"
      :style="{
        bottom: `calc(${footHeight}px + 40rpx)`,
      }"
    >
      <image class="flex fixed-icon" src="@/static/icon/live.png"></image>
      <view class="c333 mgt10 font24">直播</view>
    </view>

    <!--  -->
    <m-tabbar path="pages/index/index" @init-foot="(e) => (footHeight = e)"></m-tabbar>
  </view>
</template>

<script>
import GlTopMixin from "@/mixins/global-top";
import PanelTitle from "./components/title.vue";
import PanelAgenda from "./components/agenda.vue";
import PanelNews from "./components/news.vue";
import PanelCooperation from "./components/cooperation.vue";
import { getIndexMettingApi, getInfomationApi, getBannerApi, getSettingsApi } from "@/api/modules/homepage.js";

export default {
  mixins: [GlTopMixin],
  components: { PanelTitle, PanelAgenda, PanelNews, PanelCooperation },
  data() {
    return {
      activeIndex: 0,
      guestList: [],
      newsList: [],
      list: [],
      title: "",
      mettingIndex: {}, // 大会议程
      footHeight: 0,
    };
  },

  onShow() {
    uni.hideTabBar({
      animation: false,
    });
  },
  async onLoad() {
    uni.showLoading({
      title: "加载中",
    });
    try {
      const response = await Promise.all([
        getIndexMettingApi(),
        getInfomationApi(59), // 重磅嘉宾
        getInfomationApi(53), // 最新资讯
        getBannerApi(),
        // getSettingsApi(),
      ]);
      const [mettingIndex, guestList, newsList, bannerList, settings] = response;
      this.mettingIndex = mettingIndex[0] || {};
      this.guestList = guestList.data || [];
      this.newsList = newsList.data || [];
      this.list.push(...bannerList.map((v) => this.getImgUrl(v.tac_phone_image)));
      // console.log(settings, "----");
      // this.title = settings.tsAppletName;
    } catch (error) {
      console.log(error, "0000");
    }
    await this.$u.sleep(10);
    uni.hideLoading();
  },
};
</script>

<style lang="scss" scoped>
.guest-box {
  &__swiper {
    padding-left: 40rpx;
  }

  scroll-view {
    width: 100%;
    height: 96rpx;
  }

  &-main {
    width: fit-content;
    padding-right: 40rpx;
    flex-wrap: nowrap;

    image {
      width: 68rpx;
      height: 92rpx;
      border-radius: 12rpx;
      border: 2rpx solid transparent;

      &:not(:first-child) {
        margin-left: 32rpx;
      }
    }

    .active {
      border: 2rpx solid #582aff;
    }
  }
}

.partner-wrapper {
  width: fit-content;

  image {
    height: 180rpx;
  }
}

.fixed {
  position: fixed;
  right: 40rpx;
  bottom: calc(var(--window-bottom) + 40rpx);
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: #ffffff;
  z-index: 9;
  box-shadow: 0rpx 2rpx 20rpx 0rpx rgba(0, 0, 0, 0.1);

  &-icon {
    width: 52rpx;
    height: 32rpx;
  }
}
</style>
